<template>
  <div class="tab" v-if="data">
    <!-- 新月份员工统计表 -->
    <div class="tab_bg">
      <div class="tab_top">
        <h2>员工统计</h2>
        <h2>{{ nowDate }}: 新员工</h2>
      </div>
      <div class="tab_body">
        <!-- <el-table :data="data">
          <el-table-column prop="user_name" label="员工姓名" width="180">
          </el-table-column>
          <el-table-column prop="sex" label="员工性别" width="180">
          </el-table-column>
          <el-table-column prop="user_id" label="员工编号" width="180">
          </el-table-column>
          <el-table-column prop="age" label="员工年龄"> </el-table-column>
        </el-table> -->
         <el-table
    :data="data"
    height="250"
    border
    style="width: 100%">
    <el-table-column
      prop="user_id"
      label="员工编号"
      width="180"
      text-align:center>
    </el-table-column>
    <el-table-column
      prop="user_name"
      label="员工姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="员工性别"
       width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="员工年龄"
       width="180">
    </el-table-column>
    <el-table-column 
     width="200"
    label="操作"
    >
      <template>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete()">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      </div>
    </div>
    <!-- <h2>每月出勤</h2> -->
    <!-- echarts -->
    <div id="king"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      nowTime: "",
      nowDate: "",
      nowWeek: "",
      data: "",
      data: [],
    };
  },
  methods: {
    setNowTimes() {
      let myDate = new Date();
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      let sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.nowDate = yy + "年" + mm + "月" + dd + "日";
      this.nowTime = hou + ":" + min + ":" + sec;
      this.nowWeek = week;
    },
    mking() {
      var myChart = echarts.init(document.getElementById("king"));
      var option = {
        xAxis: {
          type: "category",
          data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    const url = "http://localhost:9000/content";
    this.axios.get(url).then((res) => {
      console.log(res);
      this.data = res.data;
      console.log(this.data);
    });
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000);
    this.mking();
  },
};
</script>

<style lang="scss" scoped>
.tab {
  position: relative;
  margin: 0 auto;
  width: 92%;
  height: 400px;
  // background-color: red;
  margin-bottom: 40px;
}
.tab_bg {
  margin-top: 50px;
  border-radius: 5px;
  width: 70%;
  height: 300px;
  float: left;
  background: #fff;
}
.tab_top {
  margin-top: -40px;
  position: absolute;
  margin-left: 40px;
  border-radius: 5px;
  width: 40%;
  height: 100px;
  background: rgb(252, 152, 17);
}
.tab_top h2 {
  margin-top: 20px;
  margin-left: 20px;
  color: #fff;
}
.tab_body {
  margin-top: 70px;
}
#king {
  float: right;
  margin-top: 50px;
  width: 350px;
  height: 300px;
  //  background: #000;
}
.el-table .cell{
  margin-left: 120px;
}
</style>